跳到主要内容

Assets

诸如图片和样式表之类的静态文件可以放置在项目的 assets/ 文件夹中。这些文件可以在您的应用程序中引用。

Assets are copied during the build process.

Referencing Assets​

To reference an image in the assets/ simply pass the relative path as a prop.

assets
└── Reflex.svg
rx.image(src="/Reflex.svg", width="5em")

始终使用斜杠 / 作为资源路径的前缀，以便从项目的根目录引用资源，否则在非根页面上可能无法正确显示。

You can add a favicon.ico file to the assets/ folder to change the favicon.

Download​

If you want to let the users of your app download files from your server to their computer, Reflex offer you two way.

只需在 rx.link 中提供资源的路径即可

rx.link("Download", href="/reflex_banner.png")

使用 rx.download 事件将始终提示浏览器下载文件，即使它可以在浏览器中显示。

The rx.download event also allows the download to be triggered from another backend event handler.

rx.button(
    "Download and Rename",
    on_click=rx.download(
        url="/reflex_banner.png",
        filename="different_name_logo.png",  # specify a name for the file that will be downloaded
    ),
)

If the data to download is not already available at a known URL, pass the data directly to the rx.download event from the backend.

import random


class DownloadState(rx.State):
    @rx.event
    def download_random_data(self):
        return rx.download(
            data=",".join(
                [
                    str(random.randint(0, 100))
                    for _ in range(10)
                ]
            ),
            filename="random_numbers.csv",
        )


def download_random_data_button():
    return rx.button(
        "Download random numbers",
        on_click=DownloadState.download_random_data,
    )

data 参数接受 str 或 bytes、data: URI、PIL.Image ，或任何状态变量；如果变量尚未是字符串，则将使用 JSON.stringify 将其转换为字符串。这允许将复杂状态结构提供为 JSON 下载。

Upload​

Uploading files to your server let your users interact with your app in a different way than just filling forms to provide data.

组件 rx.upload 允许用户将文件上传到服务器。

def index():
    return rx.fragment(
        rx.upload(rx.text("Upload files"), rx.icon(tag="upload")),
        rx.button(on_submit=State.<your_upload_handler>)
    )

详见：https://reflex.dev/docs/library/forms/upload/